<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Tabs - Default functionality</title>
        <link rel="stylesheet" href="themes/ui-lightness/jquery.ui.all.css">
        <link type="text/css" href="apycommenus/menu.css" rel="stylesheet" />
        <link rel="stylesheet" href="bannerrotator/bannerrotator.css">
        <link rel="stylesheet" href="jquerydatatable/jquery.dataTables.css">
        <style type="text/css" title="currentStyle">
            @import "tablemedia/css/demo_page.css";
            @import "tablemedia/css/demo_table_jui.css";
            @import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
        </style>
        <link rel="stylesheet" href="mycss/common.css">

        <script src="jquery-1.7.1.js"></script>
        <script src="external/jquery.bgiframe-2.1.2.js"></script>
        <script src="ui/jquery.ui.core.js"></script>
        <script src="ui/jquery.ui.widget.js"></script>
        <script src="ui/jquery.ui.tabs.js"></script>
        <script src="ui/jquery.ui.mouse.js"></script>
        <script src="ui/jquery.ui.sortable.js"></script>
        <script src="ui/jquery.ui.button.js"></script>
        <script src="ui/jquery.ui.draggable.js"></script>
        <script src="ui/jquery.ui.position.js"></script>
        <script src="ui/jquery.ui.resizable.js"></script>
        <script src="ui/jquery.ui.dialog.js"></script>
        <script src="ui/jquery.effects.core.js"></script>


        <script type="text/javascript" src="apycommenus/menu.js"></script>
        <script type="text/javascript" src="bannerrotator/bannerrotator.js"></script>

        <script type="text/javascript" language="javascript" src="tablemedia/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            function fnFormatDetails ( oTable, nTr )
            {
                var aData = oTable.fnGetData( nTr );
                var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
                sOut += '<tr><td>Gov Office Region Name:</td><td><input type="text" value="'+aData[1]+'" size="50"/></td></tr>';
                sOut += '<tr><td>Description: </td><td><textarea cols="47">'+aData[2]+'</textarea></td></tr>';
                sOut += '<tr><td>County:</td><td><ul><li>county 1 <a href="#">remove</a></li><li>county 2 <a href="#">remove</a></li></ul></td></tr>';
                sOut += '<tr><td></td><td><select><option>County 1</option><option>County 2</option></select> <input type="button" value="Add County"/></td></tr>';
                if(aData[3] == 'Yes')
                    sOut += '<tr><td>Is Active:</td><td><input type="radio" name="isActive" checked="checked"/>Yes <input type="radio" name="isActive" /> No</td></tr>';
                else
                    sOut += '<tr><td>Is Active:</td><td><input type="radio" name="isActive"/>Yes <input type="radio" name="isActive" checked="checked"/> No</td></tr>';
                sOut += '<tr><td></td><td><input type="button" value="Save"/><input type="button" value="Close"/></td></tr>';
                sOut += '</table>';

                return sOut;
            }
            $(document).ready(function() {
                $("body div:last").remove();
                /*
                 * Insert a 'details' column to the table
                 */
                var nCloneTh = document.createElement( 'th' );
                var nCloneTd = document.createElement( 'td' );
                nCloneTd.innerHTML = '<img src="tablemedia/images/details_open.png">';
                nCloneTd.className = "center";

                $('#example thead tr').each( function () {
                    this.insertBefore( nCloneTh, this.childNodes[0] );
                } );

                $('#example tfoot tr').each( function () {
                    this.insertBefore(  nCloneTh.cloneNode( true ), this.childNodes[0] );
                } );

                $('#example tbody tr').each( function () {
                    this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
                } );

                

                var oTable = $('#example').dataTable( {
                    "aoColumnDefs": [
                        { "bSortable": false, "aTargets": [ 0 ] }
                    ],
                    "aaSorting": [[1, 'asc']],
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers"
                } );
                
                
                /* Add event listener for opening and closing details
                 * Note that the indicator for showing which row is open is not controlled by DataTables,
                 * rather it is done here
                 */
                $('#example tbody td img').live('click', function () {
                    var nTr = $(this).parents('tr')[0];
                    if ( oTable.fnIsOpen(nTr) )
                    {
                        /* This row is already open - close it */
                        this.src = "tablemedia/images/details_open.png";
                        oTable.fnClose( nTr );
                    }
                    else
                    {
                        /* Open this row */
                        this.src = "tablemedia/images/details_close.png";
                        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                    }
                } );

                $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    height: 300,
                    width: 400,
                    modal: true
                });


                $( "#createGovButton" )
                .button()
                .click(function() {
                    $( "#dialog-form" ).dialog( "open" );
                });
                
            } );
        </script>
        <script>
            $(function() {
                $( "#sortable" ).sortable({
                    placeholder: "ui-state-highlight"
                });
                $( "#sortable" ).disableSelection();
            });
        </script>

        <script>
            $(function() {
                $( "#tabs" ).tabs();
            });
        </script>
        <script>
            $(document).ready(function(){
                $("body div:last").remove();
            });
        </script>
        <script>
            $(function() {
                $( "button", "#rightcontrols" ).button();
                $( "button", "#rightcontrols" ).click(function() { return false; });
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <div class="rotator">
                    <ul>
                        <li class="show"><a href="#link1"><img src="bannerrotator/images/image-2.jpg" width="1012" height="200"  alt="pic1" /></a></li>
                        <li><a href="#link3"><img src="bannerrotator/images/image-3.jpg" width="1012" height="200"  alt="pic3" /></a></li>
                        <li><a href="#link4"><img src="bannerrotator/images/image-4.jpg" width="1012" height="200"  alt="pic4" /></a></li>
                        <li><a href="#link4"><img src="bannerrotator/images/image-5.jpg" width="1012" height="200"  alt="pic4" /></a></li>
                        <li><a href="#link4"><img src="bannerrotator/images/image-6.jpg" width="1012" height="200"  alt="pic4" /></a></li>
                    </ul>
                </div>
            </div>
            <div id="menu">
                <ul class="menu">
                    <li><a href="#" class="parent"><span>Organisations</span></a></li>
                    <li>
                        <a href="#" class="parent"><span>Services</span></a>
                        <ul>
                            <li><a href="#"><span>Service Maintainance</span></a></li>
                            <li><a href="programList.html"><span>Program Maintainance</span></a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="parent"><span>Geography</span></a>
                        <ul>
                            <li><a href="goverment_office_region_list.html"><span>Goverment Office Region</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="parent"><span>Premises</span></a></li>
                </ul>
                <div id="welcomepanel">
                    <a href="#">Welcome: project manager | </a><a href="login.html">Log out</a>
                </div>
            </div>
            <div id="content">
                <div id="maincontent">
                    <div id="maincontentheader">
                        Goverment Office Region List
                    </div>
                    <div id="tabs">
                        <div class="ui-tabs-panel">
                            <div id="tablecontrols">
                                <span id="leftcontrols">
                                    <a href="#">All</a>
                                    <a href="#">|</a>
                                    <a href="#">A B C D E</a>
                                    <a href="#">|</a>
                                    <a href="#">F G H I J</a>
                                    <a href="#">|</a>
                                    <a href="#">K L M N</a>
                                    <a href="#">|</a>
                                    <a href="#">O P Q R</a>
                                    <a href="#">|</a>
                                    <a href="#">S T U V</a>
                                    <a href="#">|</a>
                                    <a href="#">W X Y Z</a>
                                </span>
                                <span id="rightcontrols">
                                    <button id="createGovButton">Create</button>
                                    <input type="checkbox"/><span>Include inactive</span>
                                </span>
                            </div>
                            <div>
                                <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                                    <thead>
                                        <tr>
                                            <th>Gov Office Region Name</th>
                                            <th>Description</th>
                                            <th>Is Active?</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <th>Gov Office Region Name</th>
                                            <th>Description</th>
                                            <th>Is Active?</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <tr>
                                            <td>Goverment Office Region Name 1</td>
                                            <td>Description 1</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 2</td>
                                            <td>Description 2</td>
                                            <td class="center">No</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 3</td>
                                            <td>Description 3</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 4</td>
                                            <td>Description 4</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 5</td>
                                            <td>Description 5</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 6</td>
                                            <td>Description 6</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 7</td>
                                            <td>Description 7</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 8</td>
                                            <td>Description 8</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 9</td>
                                            <td>Description 9</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 10</td>
                                            <td>Description 10</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                        <tr>
                                            <td>Goverment Office Region Name 11</td>
                                            <td>Description 11</td>
                                            <td class="center">Yes</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer">
                <div style="width: 80%; margin:25px auto; text-align: center;
                     font-weight: bold; color: #F6AE38;">
                    Fresher 10 - mock project - bad team designed
                </div>
            </div>
        </div>


        <div id="dialog-form" title="Create new Goverment Office Region"
             style="font-size: 14px;">
            <p class="validateTips">All form fields are required.</p>
            <form>
                <table width="100%">
                    <tr>
                        <td>
                            <label for="name">Name</label>
                        </td>
                        <td>
                            <input type="text" name="name" id="name"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="description">Description</label>
                        </td>
                        <td>
                            <textarea cols="17"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="county">County</label>
                        </td>
                        <td>
                            <select>
                                <option>County 1</option>
                                <option>County 2</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label>Is active</label>
                        </td>
                        <td>
                            <input type="radio" checked="checked" name="isactive"/>Yes
                            <input type="radio" name="isactive"/>No
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <input type="button" value="Create"/>
                            <input type="button" value="Cancel"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

